<!DOCTYPE html>
<html>
    <head>
        <title>Shape & Polyline</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0px;
                margin: 0px;                
            }            
            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }
        </style>     
        <script src="../../../../lib/core/ht.js"></script>   
        <script>       
            
            ht.Default.setImage('china', '');
            ht.Default.setImage('spain', '');
            ht.Default.setImage('usa', '');                                    
            
            ht.Default.setImage('arrow', {
                width: 100,
                height: 50,
                comps: [
                    {
                        type: 'shape',
                        points: [20, 25, 70, 25],
                        borderWidth: 5,
                        borderColor: 'black',
                        border3d: true
                    },
                    {
                        type: 'shape',
                        points: [60, 10, 60, 40, 80, 25, 60, 10],
                        background: 'red',
                        borderWidth: 1,
                        borderColor: '#40ACFF',
                        gradient: 'spread.vertical'
                    }
                ]
            });             
            
            function init(){                                
                dataModel = new ht.DataModel();
                graphView = new ht.graph.GraphView(dataModel);
                view = graphView.getView();            

                view.className = 'main';
                document.body.appendChild(view);    
                window.addEventListener('resize', function (e) {
                    graphView.invalidate();
                }, false);  
                
                shape = new ht.Shape();
                initData(shape);
                shape.setPoints([
                    {x: 100, y: 20},
                    {x: 300, y: 80},
                    {x: 100, y: 140},
                    {x: 300, y: 200}
                ]);                
                
                polyline = new ht.Polyline();
                initData(polyline);
                polyline.setPoints([
                    {x: 400, y: 20},
                    {x: 600, y: 80},
                    {x: 400, y: 140},
                    {x: 600, y: 200}
                ]);
                
                graphView.translate(30, 30);
                graphView.setEditable(true);
            }
            
            function initData(data){
                dataModel.add(data);
                data.s({
                    'shape.background': null,
                    'shape.border.width': 3,
                    
                    'label': 'HT for Web',
                    'label.background': 'yellow',
                    'label.position.fixed': true,
                    'label.position': 3,
                    'label.offset.y': -2,
                    
                    'label2': 'HIGHTOPO',                    
                    'label2.position.fixed': true,
                    'label2.position': 31,
                    
                    'icons': {
                        fromArrow: {
                            position: 15,
                            names: ['arrow'],
                            rotation: Math.PI,
                            keepOrien: true,
                            offsetX: 15,
                            offsetY: 10,
                            width: 50,
                            height: 25
                        },
                        toArrow: {
                            position: 19,
                            names: ['arrow'],
                            keepOrien: true,
                            offsetX: -27
                        },
                        flags: {
                            position: 2,
                            direction: 'east',
                            offsetY: -2,
                            names: ['china', 'spain', 'usa']
                        }
                    }
                });
            }
                        

        </script>
    </head>
    <body onload="init();">
    </body>
</html>
